<template>
  <div style="background-color: #FFFFFF;padding: 15px">
    <span style="font-size: 19px;font-weight: 600">团队列表</span><br><br><br>

    <a-form layout='inline' :model="teamInformation">
      <a-form-item name="userAccount">
        <div class="course-name">团队名称：</div>
        <a-input :style="{ width: '200px' }" placeholder="请输入团队名称" v-model:value="teamInformation.teamName"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchByInput" style="margin-left:15px">
          <search-outlined />
          查询
        </a-button>
        <a-button @click="refresh" style="margin-left:15px">
          <redo-outlined />
          重置
        </a-button>

<!--        <a-button type="primary" @click="addUser" style="margin-left:15px">-->
<!--          <plus-circle-outlined />-->
<!--          新增用户-->
<!--        </a-button>-->
      </a-form-item>
    </a-form>
  </div>

  <div class="workContent">
    <a-spin :spinning="mySpinning">
      <a-table :columns="columns" :data-source="teamList" bordered :pagination="false">
        <template #bodyCell="{ column, text, record }">

          <template v-if="column.dataIndex == 'avatar'">
            <a-image :preview="false" style="width: 30px;height: 30px;border-radius: 50%" :src="text"></a-image>
          </template>

          <template  v-if="column.dataIndex === 'operation'">
            <a style="margin-right: 10px" @click="editUser(record)">编辑</a><a-divider type="vertical" />
            <a-popconfirm
                title="确认删除吗?"
                cancelText="取消"
                okText="确认"
                @confirm="onDelete(record.teamId)"
            >
              <template #icon><question-circle-outlined style="color: red" /></template>
              <a style="color: red;margin-left: 10px">删除</a>
            </a-popconfirm>
          </template>
        </template>
      </a-table>

      <div style="width: 100%;height: 55px;">
        <a-pagination style="float: right;margin-top: 10px" v-model:current="current"
                      @change="changeNum"
                      :total="total" show-less-items />
      </div>

    </a-spin>
  </div>

  <a-modal
      v-model:visible="teamVisible"
      title="编辑团队"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
  >

    <a-form layout="horizontal" :model="teamItem"  :label-col="{ span: 6 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off">
      <a-form-item label="团队头像"  v-if="teamItem.avatar">
        <input class="input_image left" id="file" type="file" @change="change" accept="image/*" />
        <img class="show_input_image left" v-if="teamItem.avatar != ''" :src="teamItem.avatar" />
        <img class="show_input_image left" v-if="teamItem.avatar ==''" src="/img/addImg.png" />
      </a-form-item>
      <a-form-item label="团队ID"  v-if="teamItem.teamId">
        <a-input v-model:value="teamItem.teamId" :disabled="true" />
      </a-form-item>
      <a-form-item label="团队名称" v-if="teamItem.teamName">
        <a-input v-model:value="teamItem.teamName" placeholder="请输入团队名称" />
      </a-form-item>
      <a-form-item label="最大人数" v-if="teamItem.maxNum">
        <a-input-number v-model:value="teamItem.maxNum" placeholder="请输入团队最大" />
      </a-form-item>
      <a-form-item label="团队宣言" v-if="teamItem.aim">
        <a-textarea v-model:value="teamItem.aim" show-count :maxlength="100" placeholder="请输入团队宣言" />
      </a-form-item>
    </a-form>
  </a-modal>


</template>

<script setup>
import {reactive, ref} from "vue";
import {editTeam, getTeam, removeTeam} from "@/utils/team";
import {message} from "ant-design-vue";
import axios from "axios";

const teamInformation = reactive({
  teamName: '',
})

const teamList = ref([])

const teamVisible  = ref(false)
const mySpinning = ref(false)
const current = ref(1)
const total = ref(1)
const teamItem = reactive({
  aim: '',
  maxNum: 0,
  teamId: 0,
  teamName: '',
  avatar: ''
})

let columns =[
  {
    title: '团队头像',
    dataIndex: 'avatar',
    key: 'avatar',
    width: 100
  },
  {
    title: '团队ID',
    dataIndex: 'teamId',
    key: 'teamId',
    width: 100
  },
  {
    title: '团队名称',
    dataIndex: 'teamName',
    key: 'teamName'
  },
  {
    title: '人数',
    dataIndex: 'num',
    key: 'num',
    width: 100
  },
  {
    title: '最大人数',
    dataIndex: 'maxNum',
    key: 'maxNum',
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '团队宣言',
    dataIndex: 'aim',
    key: 'aim',
    width: 350,
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
  }
]

function formatDate(time){
  let nyr = time.slice(0, 10)

  let newTime = nyr

  return newTime;
}

function getTeamList(name,num){
  let teamQueryVo ={
    teamName: name,
    current: num,
    pageSize: 10,
  }
  mySpinning.value = true
  getTeam(teamQueryVo).then(res => {
    if (res.status == 200){
      mySpinning.value = false
      teamList.value = res.data.data.records
      total.value = res.data.data.total
      teamList.value.forEach(e=> {
        e.createTime = formatDate(e.createTime)
      })
    }
  })
}
getTeamList('',1)

const searchByInput =function (){
  getTeamList(teamInformation.teamName,1)
}

const refresh = function (){
  teamInformation.teamName = ''
  getTeamList('',1)
}

const changeNum = function (){
  getTeamList(teamInformation.teamName,current)
}

const editUser = function (item){
  teamItem.teamId = item.teamId
  teamItem.teamName = item.teamName
  teamItem.aim = item.aim
  teamItem.maxNum = item.maxNum
  teamItem.avatar = item.avatar
  teamVisible.value = true
}

const onDelete = function (id){
  let team = {
    teamId: id
  }
  // console.log('team',team)
  removeTeam(team).then(res=>{
    if (res.status == 200){
      message.success('删除成功')
      getTeamList(teamInformation.teamName,current.value)
    }else{
      message.error('删除失败')
    }
  })
}

const hideModal =function (){
  teamVisible.value=false
  let team = {
    avatar: teamItem.avatar,
    aim: teamItem.aim ,
    maxNum: teamItem.maxNum ,
    teamId: teamItem.teamId,
    teamName: teamItem.teamName,
  }
  editTeam(team).then(res => {
    if (res.status == 200){
      message.success('更新成功')
      getTeamList(teamInformation.teamName,current.value)
    }else{
      message.error('更新失败')
    }
  })
}

const change = function (e){
  let imgInput = document.getElementById('file')

  if (!imgInput.value){
    message.error('没有选择图片')
  }

  let file = imgInput.files[0];
  let size = file.size;
  if (size >= 1 * 1024 * 1024) {
    message.error('文件大小超出限制')
    return false;
  }
  if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
    message.error('不是有效的图片')
    return;
  }
  let formData = new FormData()
  formData.append('file',file)

  axios.post('http://121.37.0.16:8080/api/file/upload',formData,{
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (res.data.code == 0){
      teamItem.avatar = 'http://121.37.0.16:9000/public/'+ res.data.data.fileName[0]
    }
  })
}
</script>

<style scoped>
.course-name {
  width: 100px;
  margin-left: -2px;
  text-align: center;
  line-height: 32px;
  display: inline-block;
}

.workContent{
  width: 96%;margin: 25px auto 0 auto;
}

.show_input_image {
  margin-top: -60px;
  width: 60px;
  height: 60px;
  border: 1px solid #f0f0f0;
}
.input_image {
  position: relative;
  width: 60px;
  height: 60px;
  background-color: blue;
  z-index: 999;
  opacity: 0;
  border-radius: 50%;
}
</style>